Skip to content

feat: #38 add loaders and error handling to Profile and Badge list#94

Merged
joelamouche merged 3 commits intoTheSoftwareDevGuild:mainfrom
yash-1104github:Improve-loading-UX-for-lists-#38
Oct 11, 2025
Merged

feat: #38 add loaders and error handling to Profile and Badge list#94
joelamouche merged 3 commits intoTheSoftwareDevGuild:mainfrom
yash-1104github:Improve-loading-UX-for-lists-#38

Conversation

@yash-1104github
Copy link

Description:

Add real loaders and error handling for Profile and Badge lists
Solve Issue - #38

Changes include:

  • Implemented real loader components for both Profile and Badge lists using react lucide icon.

  • Display an error message when fetching data fails or the list is empty.

  • Styled components using Tailwind CSS for consistent UI.

Benefits:

  • Users now see a meaningful loader instead of placeholder content.

  • Errors and empty states are clearly communicated, improving usability.

Copy link
Contributor

@joelamouche joelamouche left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall great work!

Screenshot 2025-10-05 at 19 20 14

This still looks a bit unfriendly. We should always display "An error occurred, Please try again later or contact support on discord" in yellow with a yellow warning sign. Devs will read error messages from the logs.

Thanks in advance!

@yash-1104github
Copy link
Author

@joelamouche Okay , I'll Update it.

@yash-1104github yash-1104github force-pushed the Improve-loading-UX-for-lists-#38 branch from 41d3d0b to bb48f63 Compare October 10, 2025 13:16
@joelamouche
Copy link
Contributor

@yash-1104github I think you forgot to run npm i and commit lock file, which is why CI is failing. Also while you are at it it would be lovely if you could refactor out

<p className="text-2xl text-yellow-600 flex items-center gap-2">
        <span>⚠️</span>
        {"An error occurred, please try again later or contact support on discord"}
      </p>
<p className="text-2xl text-yellow-600 flex items-center gap-2">
        <span>⚠️</span>
        {"An error occurred, please try again later or contact support on discord"}
      </p>

into separate display-error component into component/display-error folder, since they are reused in different files

Thanks in advance!

@yash-1104github
Copy link
Author

Okay

Copy link
Contributor

@joelamouche joelamouche left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job!

@joelamouche joelamouche merged commit 4f9c02f into TheSoftwareDevGuild:main Oct 11, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

Comments